<%@ page import="br.com.unieuro.dominio.Usuario"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pt-br">

<head>
<%
	String user = (String) request.getSession().getAttribute("listaUsuarios");
%>
<title>SGI</title>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<!-- Estilos -->
<link rel="stylesheet" href="../jqwidgets/styles/jqx.base.css"type="text/css" />
<link rel="stylesheet" href="css/estilo.css"  type="text/css" /> 


<!-- Javascripts -->
	<script src="js/jquery-1.8.3.js"></script>
	<script src="js/jquery-ui-1.9.2.custom.js"></script>
	<script type="text/javascript" src="../scripts/jquery-1.8.2.min.js"></script>
	<script type="text/javascript" src="../jqwidgets/jqxcore.js"></script>
	<script type="text/javascript" src="../jqwidgets/jqxdata.js"></script>
	<script type="text/javascript" src="../jqwidgets/jqxbuttons.js"></script>
	<script type="text/javascript" src="../jqwidgets/jqxscrollbar.js"></script>
	<script type="text/javascript" src="../jqwidgets/jqxmenu.js"></script>
	<script type="text/javascript" src="../jqwidgets/jqxcheckbox.js"></script>
	<script type="text/javascript" src="../jqwidgets/jqxlistbox.js"></script>
	<script type="text/javascript" src="../jqwidgets/jqxdropdownlist.js"></script>
	<script type="text/javascript" src="../jqwidgets/jqxgrid.js"></script>
	<script type="text/javascript" src="../jqwidgets/jqxgrid.sort.js"></script>
	<script type="text/javascript" src="../jqwidgets/jqxgrid.pager.js"></script>
	<script type="text/javascript" src="../jqwidgets/jqxgrid.selection.js"></script>
	<script type="text/javascript" src="../jqwidgets/jqxgrid.edit.js"></script>
	<script type="text/javascript" src="../scripts/gettheme.js"></script>
	<script type="text/javascript" src="../scripts/grid.locale-pt-br.js"></script>
	<script type="text/javascript" src="../jqwidgets/jqxtabs.js"></script>
	<script type="text/javascript">

    $(document).ready(function () {
        var theme = getTheme();

        // Criar abas
        $('#jqxTabs').jqxTabs({ width: '90%', height: 200, position: 'top', theme: theme });
        $('#settings div').css('margin-top', '10px');

        $('#jqxTabs').jqxTabs({ animationType: 'fade' });
        $('#jqxTabs').jqxTabs({ selectionTracker:true});
    });

	//Criar Grid
        $(document).ready(function () {
            var theme = getTheme();
            
            var data = '<%=user%>';

							var source = {
								datatype : "json",
								datafields : [ {
									name : 'nome',
									type : 'string'
								}, {
									name : 'perfil',
									type : 'string'
								}, {
									name : 'id',
									type : 'int'
								}, {
									name : 'cpf',
									type : 'string'
								}, {
									name : '',
									type : 'bool'
								} ],
								localdata : data
							};
							var cellsrenderer = function(row, columnfield,
									value, defaulthtml, columnproperties) {
								if (value < 20) {
									return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #ff0000;">'
											+ value + '</span>';
								} else {
									return '<span style="margin: 4px; float: ' + columnproperties.cellsalign + '; color: #008000;">'
											+ value + '</span>';
								}
							}
							var dataAdapter = new $.jqx.dataAdapter(source, {
								downloadComplete : function(data, status, xhr) {
								},
								loadComplete : function(data) {
								},
								loadError : function(xhr, status, error) {
								}
							});
							// initialize jqxGrid
							$("#jqxgrid").jqxGrid({
								width : 670,
								source : dataAdapter,
								theme : theme,
								pageable : true,
								autoheight : true,
								sortable : true,
								altrows : true,
								enabletooltips : true,
								editable : true,
								selectionmode : 'multiplecellsadvanced',

								columns : [ {
									text : 'Selecione',
									columntype : 'checkbox',
									datafield : 'Discontinued',
									width : 100
								}, {
									text : 'id',
									datafield : 'id',
									width : 150
								}, {
									text : 'Nome',
									datafield : 'nome',
									width : 250
								}, {
									text : 'CPF',
									datafield : 'cpf',
									width : 250
								}, {
									text : 'perfil',
									datafield : 'perfil',
									width : 180
								}

								]
							});
						});
	</script>
</head>
<%
	HttpSession s = request.getSession();
	Usuario u = (Usuario) s.getAttribute("usuario");
	String perfil = u.getPerfil();
%>
<body>


<div class="geral">
	<div class="topo">
		<table>
			<tr>
				<td class="logoTopo" rowspan="3"><img width="215" height="206"
					src="/trabalho/img/LogoSGI.png"
					alt="SISTEMA DE GERENCIAMENTO DE IMAGENS - SGI" /></td>
				<td class="nomeTopo">SISTEMA DE GERENCIAMENTO DE IMAGENS - SGI</td>
			</tr>
			<tr class="usuarioLogado">
				<td>Usuario(a): <%=u.getNome()%> Perfil: <%=perfil%></span></td>
			</tr>